import React, { useState } from "react";
import { Drawer, Slider, Button } from "antd";


const RangeDrawer = ({ id, visibale, changeVisibale, rangeData, callback=()=>{} }) => {

  const [rangeValue, changeRangeValue] = useState();

  rangeData = rangeData.map(item => parseInt(item));
  const min = Math.min(...rangeData);
  const max = Math.max(...rangeData);

  let defaultMin, defaultMax;
  if(rangeData.length >= 5) {
    defaultMin = rangeData[rangeData.length - 5];
  } else {
    defaultMin = rangeData[0];
  }
  defaultMax = rangeData[rangeData.length - 1];

  const marks = {};
  rangeData.forEach(item => {
    marks[item] = {
        label: <p>{item}年</p>
    };
  });

  const handleSliderChange = value => {
    changeRangeValue(value);
  };

  const handleChangeValue = () => {
    callback(rangeValue);
  };

  return (
    <Drawer
      title="请选择数据区间"
      placement="right"
      visible={visibale}
      getContainer={false}
      className="national-range-change"
      onClose={() => {
        changeVisibale(false);
      }}
    >
      <Slider
        className="range-slider"
        vertical
        value={rangeValue || [defaultMin, defaultMax]}
        range
        dots
        min={min}
        max={max}
        marks={marks}
        onChange={handleSliderChange}
      />
      <Button type="primary" onClick={handleChangeValue}>
        确定
      </Button>
    </Drawer>
  );
};

export default RangeDrawer;
